<template>
 <div>
  <span v-wcolor='c1'>1</span>
  <span v-focus='color'>2</span>
  <span v-fontsize="'48px'">999</span>
 </div>
</template>

<script>
import mixin from '../mixin'
export default {
  name: 'HelloWorld',
  data() {
    return {
      str: ['tiantian', '2', '3'],
      color: 'blue',
      size:'20px'
    }
  },
  mixins: [mixin],
  render(createElement){
    let _eml =  createElement(
      'div',
      {
        class: 'lianxi', 
        // domProps:{innerHTML: 'xiaoxiao'},
        style:'color: red',
        attrs: {id: 'uu'},
      },
      [
        // createElement('h1', 'miaomiao')
        this.str.map(e => createElement('li', e))
      ]
    );
    console.log( _eml)
    return _eml
  },
  props: {
    msg: String
  },
  directives:{
    wcolor: {
      inserted(el){
        el.style.color = "red"
      }
    },
    fontsize: {
      bind(el, val) {
        el.style.fontSize = val.value
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
